
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Card } from 'antd';

import { TaskCategoryTree, FlowProjectGrid, TasksTable } from './components';
import { FlowEditor } from '../flow';
import { Workflow } from '@/components';
import { SCHEDULER_TASK_CLASS_IDENTIFIER, WORKFLOW_CLASS_IDENTIFIER } from '@/services/constants';
import { dsFindOne, ComparsionOperator, SchedulerTaskType } from '@/services/local';
import { TaskTemplateTable } from './components/template/template-table';

export interface SchedulerPageProps {
    style?: CSSProperties;
    taskType?: SchedulerTaskType;
}

export const SchedulerPage: React.FC<SchedulerPageProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [version, setVersion] = useState<number>(0);

    return (
        <Container style={props.style}>
            <StyledCard
                title={'模板列表'}
                style={{
                }}
                styles={{
                    body: {
                        padding: '0px 2px',
                        overflow: 'auto',
                        height: 'calc(100% - 40px)'
                    }
                }}
            >
                <TaskTemplateTable></TaskTemplateTable>
            </StyledCard>
            <StyledCard
                title={'任务列表'}
                style={{
                }}
                styles={{
                    body: {
                        padding: '0px 2px',
                        overflow: 'auto',
                        height: 'calc(100% - 40px)'
                    }
                }}
            >
                <TasksTable></TasksTable>
            </StyledCard>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
`;

const StyledCard = styled(Card)`
    width: 100%;
    height: 100%;
`